<template lang='pug'>
  .page
    .RoleManage
      .search-form.mb-25.pl-10.pr-10
        Row.mb-15(type="flex" justify="start")
          Col.pr-20(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
            span.label-txt.w80 角色名称：
            Input(v-model="formData.name" placeholder="请输入" clearable)
          //- Col.pr-20(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          //-   span.label-txt.w80 权限字符：
          //-   Input(v-model="formData.typeName" placeholder="请输入")

          Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
            Button(v-if="hasFind" type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true"
          @on-selection-change="handleOnSelectChange"
        )
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10(v-if="hasCreate" type="info" @click="handleShowCreateRoleModal('')") 新增
              Button.mr-10(v-if="hasBatchAddPermission" type="info" ghost :disabled="!selectedId.length > 0" @click="handleShowBatchAuthModal(true, selectedId)") 批量添加
              Button.mr-10(v-if="hasBatchRemovePermission" :disabled="!selectedId.length > 0" @click="handleShowBatchAuthModal(false, selectedId)") 批量删除
              Button.mr-10(v-if="hasEnabledList" type="info" :disabled="!selectedId.length > 0" @click="enabledList(selectedId, true)") 启用
              Button(v-if="hasDisEnabledList" type="warning" :disabled="!selectedId.length > 0" @click="enabledList(selectedId, false)") 禁用

          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(v-if="hasEdit" type="text" size="small" @click="handleShowCreateRoleModal(row.id)") 编辑
            Button.mr-10(v-if="hasBindUsers" type="text" size="small" @click="handleShowBindAccountModal(row.id)") 账号绑定
            Button.mr-10(type="text" size="small" v-if="!row.enabled && hasEnabledList" @click="enabledList(row.id, !row.enabled)") 启用
            Button.mr-10(type="text" size="small" v-if="row.enabled && hasDisEnabledList" @click="enabledList(row.id, !row.enabled)") 禁用

          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :current="tableComone.pageIndex"
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )

    //- 新建弹窗
    CreateRoleModal(ref="CreateRoleModal" @handleSave="searchFn")

    //- 账号绑定弹窗
    BindAccountModal(ref="BindAccountModal")

    //- 批量添加权限弹窗
    BatchAuthModal(ref="BatchAuthModal" @handleSave="searchFn")
</template>

<script>
import { RoleApi } from '@/api/Role.api.js'
import { roleThead } from './RMtableHead.js'
import _cloneDeep from 'clone-deep'
import CreateRoleModal from './modal/CreateRoleModal.vue'
import BindAccountModal from './modal/BindAccountModal.vue'
import BatchAuthModal from './modal/BatchAuthModal.vue'

export default {
  name: 'RoleModalModal',

  components: {
    CreateRoleModal,
    BindAccountModal,
    BatchAuthModal
  },

  data () {
    return {
      thead: _cloneDeep(roleThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10 // 当前页面展示条数
      },
      formData: {
        type: ''
        // typeName: ''
      },
      selectedId: [], // 勾选的id集合
      selectedIdArr: [] // 勾选的id, name数组集合
    }
  },

  mounted () {
    this.query()
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 查看
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },
    // 新增
    hasCreate () {
      return this.actionArr.indexOf('Create') > -1
    },
    // 编辑
    hasEdit () {
      return this.actionArr.indexOf('Edit') > -1
    },
    // 删除
    hasDelete () {
      return this.actionArr.indexOf('Delete') > -1
    },
    // 启用
    hasEnabledList () {
      return this.actionArr.indexOf('EnabledList') > -1
    },
    // 禁用
    hasDisEnabledList () {
      return this.actionArr.indexOf('DisEnabledList') > -1
    },
    // 账号绑定
    hasBindUsers () {
      return this.actionArr.indexOf('BindUsers') > -1
    },
    // 批量添加权限
    hasBatchAddPermission () {
      return this.actionArr.indexOf('BatchAddPermission') > -1
    },
    // 批量删除权限
    hasBatchRemovePermission () {
      return this.actionArr.indexOf('BatchRemovePermission') > -1
    }
  },

  methods: {
    // 数据字典
    // getEnum () {
    //   let groupName = 'change.securitytype'
    //   Common.getEnum(groupName, this.arrListDown)
    //   // console.log('数据字典：', this.arrListDown)
    // },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      this.selectedId = []
      this.selectedIdArr = []
      var params = {
        name: this.formData.name,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await RoleApi.getList(params)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
      this.loading = false
    },

    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedIdArr = value.map((item) => {
        return { id: item.id, name: item.name }
      })
      let arr = value.map((item) => {
        return item.id
      })
      this.selectedId = arr.join(',')
    },

    // 显示新增弹窗
    handleShowCreateRoleModal (id) {
      this.$refs.CreateRoleModal.show()
      // this.$refs.CreateRoleModal.isShowCreateRoleModal = true
      this.$refs.CreateRoleModal.createRoleModalTitle = id ? '修改角色' : '新增角色'
      this.$refs.CreateRoleModal.basicDataId = id
      this.$refs.CreateRoleModal.getModel(id)
    },

    // 显示账号绑定弹窗
    handleShowBindAccountModal (id) {
      this.$refs.BindAccountModal.show()
      this.$refs.BindAccountModal.roleId = id
      this.$refs.BindAccountModal.query(id, false, 'waitTable')
      this.$refs.BindAccountModal.query(id, true, 'selectedTable')
      if (id) {
        this.$refs.BindAccountModal.basicDataId = id
      } else {
      }
    },

    // 启用/禁用
    async enabledList (id, enabled) {
      var params = {
        ids: id,
        enabled: enabled
      }
      let res = await RoleApi.enabledList(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 显示批量添加权限弹窗
    handleShowBatchAuthModal (isAdd, roleIdList) {
      this.$refs.BatchAuthModal.getPermissionTreeList()
      this.$refs.BatchAuthModal.show(isAdd, roleIdList)
    }
  }
}
</script>

<style>
</style>
